<template>
  <el-header>
    <div class="header-content">
      <img src="@/assets/LOGO.png" alt="Logo" class="menu-logo">
      <div class="search-box">
        <el-input 
          v-model="searchQuery"
          :icon="Search"
          placeholder="请输入你感兴趣的内容"
          prefix-icon="el-icon-search"
          @keyup.enter="handleSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>  
      <p>
        <el-link style="margin-right:120px;margin-top: 0px;font-size:20px;">
          <router-link to="/EducationHome" class="nav-link" active-class="active" style="text-decoration: none;">首页</router-link>
        </el-link>
        <el-link style="margin-right: 120px;margin-top: 0px;font-size:20px">
          <router-link to="/InteractiveForum" class="nav-link" active-class="active" style="text-decoration:none;">互动交流</router-link>
        </el-link>
        <el-link style="margin-right:120px;margin-top: 0px;font-size:20px">
          <router-link to="/GuanyuZhisi" class="nav-link" active-class="active" style="text-decoration:none;">
            关于智思云
          </router-link>
        </el-link>
        <template v-if="!isLoggedIn">
          <router-link to="/Register" class="nav-links" active-class="active" style="text-decoration:none;color:white">
            <el-button type="primary" style="border-radius: 20px;margin-right: 155px;">
              注册/登录
            </el-button>
          </router-link>
        </template>
        <template v-else>
          <el-button type="primary" style="border-radius: 20px;margin-right: 155px;" @click="logout">
            欢迎 {{ username }}
          </el-button>
        </template>
      </p>
    </div>
  </el-header> 
</template>
<script>
import { ElInput, ElButton } from 'element-plus';

export default {
  components: {
    ElInput,
    ElButton
  },
  data() {
    return {
      searchQuery: '',
      isLoggedIn: false,
      username: ''
    };
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim() === '') {
        this.$message.error('请输入搜索内容');
        return;
      }
      console.log('搜索内容:', this.searchQuery);
      // 这里可以添加更多的搜索逻辑
    },
    login(user) {
      // 模拟登录成功后的操作
      this.isLoggedIn = true;
      this.username = user.name;
      localStorage.setItem('token', 'your_token_here');
      localStorage.setItem('username', user.name);
    },
    logout() {
      this.isLoggedIn = false;
      this.username = '';
      localStorage.removeItem('token');
      localStorage.removeItem('username');
      this.$router.push('/LoginForm');
    }
  },
  created() {
    const token = localStorage.getItem('token');
    const username = localStorage.getItem('username');
    if (token &&username) {
      this.isLoggedIn = true;
      this.username = username;
    }
  }
};
</script>
<style scoped>
.el-main {
  flex: 1;
  padding: 20px;
}
.nav-link {
  font-weight: bold;
  color: dimgray;
  margin: 0 10px;
}
.nav-links {
  font-weight: bold;
  color: white;
  margin: 0 10px;
}
.nav-link.active {
  color: dodgerblue; /* 激活状态的字体颜色 */
}
.nav-links.active {
  color: dodgerblue; /* 激活状态的字体颜色 */
}
.icon-text-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.icon-text-container .el-icon {
  margin-right: 80px; /* 图标与文本之间的间距 */
}
.flex-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 子元素之间均匀分布 */
  gap: 20px; /* 子元素之间的间距 */
  margin-top: 50px;
}
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
.menu-logo {
  width: 60px; /* 调整Logo的宽度 */
  height: auto; /* 保持比例 */
  margin-left: 140px; /* Logo与文字之间的间距 */
  margin-top: -10px;
}
.el-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #4a89bd4e;
  color: #333;
  text-align: center;
  line-height: 40px;
}
.search-box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 40px;
  margin-top: -10px;
  display: flex;
  transition: all 0.3s;
  align-items: center;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
}
</style>

